<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>配置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../js/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../js/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">配置筛查端IP和端口</div>
          <div class="layui-card-body" pad15>
            
            <div class="layui-form" lay-filter="">
              <div class="layui-form-item">
                <label class="layui-form-label">IP</label>
                <div class="layui-input-inline">
                  <input type="text" name="server_ip" id="server_ip"  class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">端口</label>
                <div class="layui-input-inline">
                  <input type="text" name="server_port"  id="server_port" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" id="save_btn">保存</button>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../../../js/jquery.min.js"></script>
  <script src="../../../js/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../js/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set']);

  $(document).ready(function() {
            // 页面加载完成后立即尝试从 localStorage 中加载数据
            loadFromLocalStorage();

            // 绑定点击事件到保存按钮
            $('#save_btn').click(function() {
                saveToLocalStorage();
            });

            // 绑定点击事件到加载按钮
            $('#load_btn').click(function() {
                loadFromLocalStorage();
            });
        });

        // 保存数据到 localStorage
        function saveToLocalStorage() {
            // 获取输入值
            var server_ip = $('#server_ip').val();
            var server_port = $('#server_port').val();

            // 验证输入
            if (!isValidIP(server_ip) || !isValidPort(server_port)) {
                alert("请输入有效的IP地址和端口号");
                return;
            }

            // 当前时间
            var now = new Date();
            
            // 设置过期时间为30天后
            var expireDate = new Date();
            expireDate.setDate(now.getDate() + 30);

            // 将对象序列化为 JSON 字符串
            var obj = {
                server_ip: server_ip,
                server_port: server_port,
                expireDate: expireDate.getTime()  // 添加过期时间到对象中
            };
            var objStr = JSON.stringify(obj);

            // 存储对象到 localStorage
            localStorage.setItem('obj', objStr);

            alert("保存成功");
        }

        // 从 localStorage 中加载数据
        function loadFromLocalStorage() {
            const objStr = localStorage.getItem('obj');
            if (objStr) {
                try {
                    const obj = JSON.parse(objStr);
                    const expireDate = new Date(obj.expireDate);

                    if (expireDate > new Date()) {
                        // 未过期，填充输入框
                        $('#server_ip').val(obj.server_ip);
                        $('#server_port').val(obj.server_port);
                    } else {
                        // 已过期，清除数据并提示用户
                        localStorage.removeItem('obj');
                        console.log('已过期');
                        alert("配置已过期，请重新配置筛查端IP和端口");
                    }
                } catch (error) {
                    console.error('解析 JSON 错误:', error);
                    alert("无法读取配置，请重新配置筛查端IP和端口");
                }
            }
        }

        // 假设的验证函数
        function isValidIP(ip) {
            // 使用正则表达式验证 IP 地址
            var regex = /^(\d{1,3}\.){3}\d{1,3}$/;
            return regex.test(ip);
        }

        function isValidPort(port) {
            // 端口号应该是一个整数，在 1 到 65535 之间
            return /^\d+$/.test(port) && parseInt(port, 10) >= 1 && parseInt(port, 10) <= 65535;
        }

  </script>
</body>
</html>